<script>
import {getSysConfigs,updateSysConfigs,deleteSysConfig} from '@api/apiStreamPlat'
export default {
  name: 'SystemCfg',
  mounted() {
    this.queryConfig()
  },

  data() {
    return {
      loading: false,
      form: {
        flink_home: '',
        flink_streaming_platform_web_home: '',
        auto_savepoint: '',
        yarn_rm_http_address: '',
        flink_rest_http_address: '',
        flink_rest_ha_http_address: ''
      },
      content: 'This is the content of the popover.',
    }
  },
  methods: {
    updateConfig(key, value) { // 更新配置
      this.loading = true
      var param = {key: key, val: value}
      updateSysConfigs(param).then(response => {
        this.loading = false
        const { code, success, message, result } = response
        if (code !== 200 || !success) {
          this.$message({ type: 'error', message: (message || '请求数据异常！') })
          return
        }
        this.$message({ type: 'success', message: `更新成功！` })
        this.queryConfig()
      }).catch(error => {
        this.loading = false
        this.$message({ type: 'error', message: '请求异常！' })
        console.log(error)
      })
    },
    deleteConfig(key) { // 删除配置
      var keyname = ''
      if (key === 'flink_home') {
        keyname = 'Flink主目录地址配置'
      } else if (key === 'flink_streaming_platform_web_home') {
        keyname = 'Flink管理平台Web地址配置'
      } else if (key === 'yarn_rm_http_address') {
        keyname = 'Yarn RM Http地址配置'
      } else if (key === 'flink_rest_http_address') {
        keyname = 'Flink Web地址'
      } else if (key === 'flink_rest_ha_http_address') {
        keyname = 'Flink HA Web地址'
      } else if (key === 'auto_savepoint') {
        keyname = 'Flink auto_savepoint'
      }

      let that = this

      this.$confirm({
        title: '提示',
        content: `是否删除${keyname}`,
        onOk() {
          let params = {key}
          that.loading = true
          deleteSysConfig(params).then(response => {
            that.loading = false
            const { code, success, message, result } = response
            if (code !== 200 || !success) {
              that.$message.error(message || '请求数据异常！' )
              return
            }
            that.$message.success( `删除成功！` )
            that.queryConfig()
          })
        }
      })
      // this.$confirm(`是否删除${keyname}`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.loading = true
      //   deleteConfig(key).then(response => {
      //     this.loading = false
      //     const { code, success, message, data } = response
      //     if (code !== '200' || !success) {
      //       this.$message({ type: 'error', message: (message || '请求数据异常！') })
      //       return
      //     }
      //     this.$message({ type: 'success', message: `删除成功！` })
      //     this.queryConfig()
      //   }).catch(error => {
      //     this.loading = false
      //     this.$message({ type: 'error', message: '请求异常！' })
      //     console.log(error)
      //   })
      // })
    },
    queryConfig() { // 查询配置列表
      this.loading = true
      getSysConfigs().then(response => {
        this.loading = false
        const { code, success, message, result } = response
        if (code !== 200 || !success) {
          this.$message.error( '请求数据异常！')
          return
        }
        this.form.flink_home = ''
        this.form.flink_streaming_platform_web_home = ''
        this.form.auto_savepoint = ''
        this.form.yarn_rm_http_address = ''
        this.form.flink_rest_http_address = ''
        this.form.flink_rest_ha_http_address = ''
        result.forEach((item) => {
          if (item.key === 'flink_home') {
            this.form.flink_home = item.val
          } else if (item.key === 'flink_streaming_platform_web_home') {
            this.form.flink_streaming_platform_web_home = item.val
          } else if (item.key === 'yarn_rm_http_address') {
            this.form.yarn_rm_http_address = item.val
          } else if (item.key === 'flink_rest_http_address') {
            this.form.flink_rest_http_address = item.val
          } else if (item.key === 'flink_rest_ha_http_address') {
            this.form.flink_rest_ha_http_address = item.val
          } else if (item.key === 'auto_savepoint') {
            this.form.auto_savepoint = item.val
          }
        })
      }).catch(error => {
        this.loading = false
        this.$message.error('请求异常！')
        console.log(error)
      })
    },
  }
}

</script>

<template>
  <a-spin :spinning="loading">
  <a-card  :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form  :form="form">
      <a-form-item
        label="Flink客户端目录"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
        <div  style="display: flex;">
          <a-popover >
            <template #content>
              <p>Flink客户端目录（必选）</p>
            </template>
            <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
          </a-popover>
          <a-input  v-model="form.flink_home" placeholder="Flink客户端目录（必选）"/>
        <a-button style="margin-left: 8px" htmlType="submit" type="primary" @click="updateConfig('flink_home', form.flink_home)">提交</a-button>
        <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('flink_home')">删除</a-button>
        </div>
      </a-form-item>
      <a-form-item
        label="Flink管理平台应用安装的目录"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
        <div  style="display: flex;">
          <a-popover >
            <template #content>
              <p>Flink客户端目录（必选）</p>
            </template>
            <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
          </a-popover>
          <a-input  v-model="form.flink_streaming_platform_web_home" placeholder="Flink管理平台应用安装的目录（必选）"/>
          <a-button style="margin-left: 8px" htmlType="submit" type="primary"  @click="updateConfig('flink_streaming_platform_web_home', form.flink_streaming_platform_web_home)">提交</a-button>
          <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('flink_streaming_platform_web_home')">删除</a-button>
        </div>
      </a-form-item>
      <a-form-item
        label="自动开启savepoint"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
        <div  style="display: flex;">
          <a-popover >
            <template #content>
              <p>F全局配置 默认开启 变量值 true 或 false</p>
            </template>
            <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
          </a-popover>
          <a-input  v-model="form.auto_savepoint" placeholder="全局配置 默认开启 变量值 true 或 false"/>
          <a-button style="margin-left: 8px" htmlType="submit" type="primary" @click="updateConfig('auto_savepoint', form.auto_savepoint)">提交</a-button>
          <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('auto_savepoint')">删除</a-button>
        </div>
      </a-form-item>
      <a-form-item
        label="Yarn RM Http地址"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
        <div  style="display: flex;">
          <a-popover >
            <template #content>
              <p>yarn-per-job 和 yarn-application模式必选 可选主备多个地址用;分隔 默认第一个是主</p>
            </template>
            <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
          </a-popover>
          <a-input  v-model="form.yarn_rm_http_address" placeholder="yarn-per-job 和 yarn-application模式必选 可选主备多个地址用;分隔 默认第一个是主"/>
          <a-button style="margin-left: 8px" htmlType="submit" type="primary"  @click="updateConfig('yarn_rm_http_address', form.yarn_rm_http_address)">提交</a-button>
          <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('yarn_rm_http_address')">删除</a-button>
        </div>
      </a-form-item>
    <a-form-item
      label="Flink服务HTTP地址"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
      <div  style="display: flex;">
        <a-popover >
          <template #content>
            <p>Flink Rest & web frontend 地址(Local Cluster模式)</p>
          </template>
          <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
        </a-popover>
        <a-input  v-model="form.flink_rest_http_address" placeholder="Flink Rest & web frontend 地址(Local Cluster模式)"/>
        <a-button style="margin-left: 8px" htmlType="submit" type="primary" @click="updateConfig('flink_rest_http_address', form.flink_rest_http_address)">提交</a-button>
        <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('flink_rest_http_address')">删除</a-button>
      </div>
    </a-form-item>
    <a-form-item
      label="Flink HA服务HTTP地址"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
      <div  style="display: flex;">
        <a-popover >
          <template #content>
            <p>HA http地址(Standalone Cluster模式支持HA，可以填写多个地址用;分隔)</p>
          </template>
          <a-icon type="message" style="font-size: 1.2rem;margin-right: 8px;color: red"></a-icon>
        </a-popover>
        <a-input  v-model="form.flink_rest_ha_http_address" placeholder="HA http地址(Standalone Cluster模式支持HA，可以填写多个地址用;分隔)"/>
        <a-button style="margin-left: 8px" htmlType="submit" type="primary" @click="updateConfig('flink_rest_ha_http_address', form.flink_rest_ha_http_address)">提交</a-button>
        <a-button style="margin-left: 8px" type="danger" @click="deleteConfig('flink_rest_ha_http_address')">删除</a-button>
      </div>
    </a-form-item>
    </a-form>
  </a-card>
  </a-spin>
</template>

<style scoped>

</style>